<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频上传</title>
<link rel="stylesheet" href="video.css">
</head>
<body>
<div class="vbox">
	
</div>







点播上传配置
<hr />
<div id="videoUp">
  <table frame=void width="400px">
    <tr>
      <td>uploadAuth:</td>
      <td><input type="text" id="uploadAuth" size="20" value=""></td>
      <td>uploadAddress:</td>
      <td><input type="text" id="uploadAddress" size="20" value=""></td>
    </tr>
  </table>
  <hr />
  文件管理
  <hr />
  <input type="file" name="file" id="files" multiple/>
  <button type="button" onclick="deleteFile()">删除文件</button>
  <input type="text" id="deleteIndex" size="3" value="0">
  <button type="button" onclick="cancelFile()">取消文件</button>
  <input type="text" id="cancelIndex" size="3" value="0">
  <button type="button" onclick="resumeFile()">恢复文件</button>
  <input type="text" id="resumeIndex" size="3" value="0">
  <hr />
  列表管理
  <hr />
  <button type="button" onclick="getList()">获取上传列表</button>
  <button type="button" onclick="clearList()">清理上传列表</button>
  <hr />
  上传管理
  <hr/>
  <button onclick="start()">开始上传</button>
  <button type="button" onclick="stop()">停止上传</button>
  <hr />
  <select multiple="multiple" id="textarea" style="width:100%;height:450px; vertical-align:top; border:1px solid #cccccc;">
  </select>
</div>
<script src="../jquery-1.11.1.min.js"></script>
<script src="../sy_main.js"></script>
<script src="aliyun-sdk.min.js"></script>
<script src="vod-sdk-upload-1.0.6.min.js"></script>
<script>

    var uploader;
    window.onload = new function() {
        uploader = new VODUpload({
            // 文件上传失败
            'onUploadFailed': function (uploadInfo, code, message) {
                log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
            },
            // 文件上传完成
            'onUploadSucceed': function (uploadInfo) {
                log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
            },
            // 文件上传进度
            'onUploadProgress': function (uploadInfo, totalSize, uploadedSize) {
                log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(uploadedSize * 100 / totalSize) + "%");
            },
            // 开始上传
            'onUploadstarted': function (uploadInfo) {
				//1、调用后台请求获取uploadAuth和uploadAddress
				//2、调用后台请求时传入参数：
				//fileName：视频源文件名称，视频源文件名称
				//title：视屏标题
				var uploadAuth = document.getElementById("uploadAuth").value;
				var uploadAddress = document.getElementById("uploadAddress").value;
				uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress);
                
                log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
            }
        });

		// 点播上传。每次上传都是独立的鉴权，所以初始化时，不需要设置鉴权
		uploader.init();
    };
	var fileName = "";
    document.getElementById("files").addEventListener('change', function (event) {
		var userData = '{"Vod":{"UserData":"{"IsShowWaterMark":"false","Priority":"7"}"}}';
		

		for(var i=0; i<event.target.files.length; i++) {
			log("add file: " + event.target.files[i].name);
			fileName = event.target.files[i].name;
			// 点播上传。每次上传都是独立的OSS object，所以添加文件时，不需要设置OSS的属性
			uploader.addFile(event.target.files[i], null, null, null, userData);
			console.log(event.target.files[i]);
			
		}
	});

    var textarea=document.getElementById("textarea");

    function start() {
        log("start upload.");
		log(fileName);
		$.post("//192.168.30.141:8769/video/getUploadVideoAuth", {"fileName":fileName},function(e) {
			console.log(e);
			$("#uploadAuth").val(e.result.uploadAuth);
			$("#uploadAddress").val(e.result.uploadAddress);
			uploader.startUpload();
		})
//		$.post("//192.168.30.141:8769/video/getUploadVideoAuth", {"fileName":"test.mp4"}, function(e){
//           console.log(e);
//        })
        //uploader.startUpload();
    }

    function stop() {
        log("stop upload.");
        uploader.stopUpload();
    }

    function clearList() {
        log("clean upload list.");
        uploader.cleanList();
    }
    function getList() {
        log("get upload list.");
        var list = uploader.listFiles();
        for (var i=0; i<list.length; i++) {
            log("file:" + list[i].file.name + ", status:" + list[i].state + ", endpoint:" + list[i].endpoint + ", bucket:" + list[i].bucket + ", object:" + list[i].object);
        }
    }

    function deleteFile() {
        if (document.getElementById("deleteIndex").value) {
            var index = document.getElementById("deleteIndex").value
            log("delete file index:" + index);
            uploader.deleteFile(index);
        }
    }

    function cancelFile() {
        if (document.getElementById("cancelIndex").value) {
            var index = document.getElementById("cancelIndex").value
            log("cancel file index:" + index);
            uploader.cancelFile(index);
        }
    }

    function resumeFile() {
        if (document.getElementById("resumeIndex").value) {
            var index = document.getElementById("resumeIndex").value
            log("resume file index:" + index);
            uploader.resumeFile(index);
        }
    }

    function log(value) {
        if (!value) {
            return;
        }

        var len = textarea.options.length;
        if (len > 0 && textarea.options[len-1].value.substring(0, 40) == value.substring(0, 40)) {
            textarea.remove(len-1);
        } else if (len > 25) {
            textarea.remove(0);
        }

        var option=document.createElement("option");
        option.value=value,option.innerHTML=value;
        textarea.appendChild(option);
    }
</script>
</body>
</html>
